<template>
  <div class="giftcard">
    <!-- 顶部 -->
    <van-nav-bar
      title="礼品卡"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <van-tabs
      v-model="active"
      style="margin-top: 10vw"
      title-active-color="#9FC600"
    >
      <van-tab title="购买礼品卡">
        <div class="cards">
          <div class="card1">
            <van-image lazy-load src="/imgs/me-card/1.png">
              <template v-slot:loading>
                <van-loading type="circular" size="20" />
              </template>
            </van-image>
          </div>
          <div class="card2">
            <h3>双鱼座</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/2.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>善解人意</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/3.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>浪漫富于想象</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>奈雪戏院</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/4.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>一出重头戏</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/5.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>上茶上点心</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>黑桑葚鲜果茶</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/6.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>拥抱热泪的鲜活</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/7.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>打破常规，力量无线</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>生日祝福</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/8.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>HAPPY BIRTHDAY</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/9.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>生日万岁</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>经典主题</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/10.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>爱要大声说</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/11.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>喜欢你霉道理</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>经典主题</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/12.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>对它诚心诚意</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/13.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>一起'榴'住美好时刻</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>水瓶座</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/14.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>天马行空</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/15.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>与众不同</p>
              </div>
            </div>
          </div>
          <div class="card2">
            <h3>摩羯座</h3>
            <div class="card_in">
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/16.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>天马行空</p>
              </div>
              <div>
                <van-image
                  lazy-load
                  src="/imgs/me-card/17.png"
                  width="100%"
                  height="80%"
                >
                  <template v-slot:loading>
                    <van-loading type="circular" size="40" />
                  </template>
                </van-image>
                <p>不拘一格，潇洒自在</p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="我的礼品卡">
        <van-search v-model="value" placeholder="兑换礼品" shape="round" />
        <van-empty
          description="暂无礼品卡"
          class="custom-image"
          image="/imgs/me-card/19.png"
        />
        <van-tabbar
          route
          fixed
          v-model="selected"
          active-color="#C5D700"
          inactive-color="#A0A4A7"
        >
          <van-tabbar-item to="/home/index">历史礼品卡</van-tabbar-item>
          <van-tabbar-item to="/home/products">获卡记录</van-tabbar-item>
          <van-tabbar-item to="/home/orders">赠送记录</van-tabbar-item>
        </van-tabbar>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.giftcard {
  background-color: #f5f5f5;
}
.card1 > img {
  margin-top: 1vw;
  width: 100%;
  height: 60vw;
}
.card2 {
  width: 90%;
  margin: 6vw auto;
  h3 {
    font-size: 4vw;
  }
  .card_in {
    margin-top: 2vw;
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: space-between;
    text-align: center;
    div {
      width: 45%;
      background: #fdfffe;
      padding-bottom: 4vw;

      p {
        font-size: 3.5vw;
        margin-top: -2vw;
      }
    }
  }
}
// 搜索
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>